<template>
  <div class="normal-box">
    <!-- 仅看数据展示 start -->
    <div class="flex-x only-see-box">
      <div class="form-only-see flex-x" v-for="(item, index) in formArr" :key="index">
        <div class="form-only-see-title">{{ item.lable }}</div>
        <div v-if="item.key === 'key6'" :class="'form-only-see-state form-only-see-' + item.state">{{ item.value }}</div>
        <div v-else-if="item.key === 'key5'" class="form-only-see-input">
          <template v-if="isOpenData && item.value">
            <open-data type="userName" :openid="item.value"></open-data>
          </template>
          <template v-else>
            {{ item.value }}
          </template>
          <el-popover v-if="propData.data.type === '退回' && (propData.data.state === 'suspending' || propData.data.state === 'dealing') && isRepertoryAdmin" width="50%" v-model="popovershow" placement="right">
            <div>
              <p>{{ $t('part.text16') }}</p>
              <p class="popover-line"></p>
              <div>
                <span>{{ $t('part.field3') }}：</span>
                <publink-select filterable v-model="targetId">
                  <el-option v-for="item in targetList" :key="item.id" :label="item.name" :value="item.id" :origin="item">
                    <template v-if="isOpenData && item.staffId">
                      <open-data type="userName" :openid="item.staffId"></open-data>
                    </template>
                    <template v-else>
                      {{ item.name }}
                    </template>
                  </el-option>
                </publink-select>
                <p class="popover-line" style="margin-top: 12px"></p>
                <el-button type="primary" style="float: right" @click="submitEditTarget" :disabled="pending">{{ $t('common.base.makeSure') }}</el-button>
                <el-button class="mar-r-15" type="ghost" style="float: right" @click="popovershow = false">{{ $t('common.base.cancel') }}</el-button>
              </div>
            </div>
            <i slot="reference" @click="editTargetRepertory" class="iconfont icon-bianji"></i>
          </el-popover>
        </div>
        <div v-else-if="item.key === 'key4'">
          <template v-if="isOpenData && item.value">
            <open-data type="userName" :openid="item.value"></open-data>
          </template>
          <template v-else>
            {{ item.value }}
          </template>
          <span v-if="propData.data.type === '退回' && notOneself" class="form-only-see-state form-only-see-suspending">{{ $t('part.text14') }}</span>
        </div>
        <div v-else class="form-only-see-input">{{ item.value }}</div>
      </div>
    </div>
    <!-- 仅看数据展示 end -->

    <div class="flex-x al-start">
      <!-- 出入库类型 start-->
      <div class="form-only-see flex-x">
        <div class="form-only-see-title mar-r-15">{{ $t('part.text17') }}</div>
        <div>{{ propData.data.businessTypeStr }}</div>
      </div>
      <!-- 出入库类型 end -->

      <!-- 关联订单号 start-->
      <div class="form-only-see flex-x" v-if="propData.data.businessInfo">
        <div class="form-only-see-title mar-r-15">{{ $t('part.text18') }}</div>
        <div class="color-primary" @click="onSeeDetail(propData.data.businessInfoId, propData.data.businessType)">{{ propData.data.businessInfo }}</div>
      </div>
      <!-- 关联订单号 end-->
    </div>

    <!-- 备注 start-->

    <div class="flex-x mar-b-20 al-start">
      <div class="form-only-see-title mar-r-15">{{ $t('part.text19') }}</div>
      <div>{{ propData.data.remark }}</div>
    </div>
    <!-- 备注 end -->

    <!-- 备件清单 start-->
    <div class="mar-b-20" v-if="propData.data.state !== 'suspending' && propData.data.state !== 'dealing'">
      <div class="mar-b-15 font-w-500">{{ $t('common.task.cardName[12]') }}</div>
      <el-table v-table-style border :data="propData.arr" stripe :key="partDealKey" style="width: 100%" max-height="350">
        <el-table-column type="index" :label="$t('common.base.SN')" width="50px"></el-table-column>
        <el-table-column v-for="(item, index) in tableColumnReadonly" :key="index" :prop="item.prop" :label="item.lable" :min-width="item.width" :fixed="item.fixed">
          <template slot-scope="scope">
            <template v-if="item.field === 'price'">{{ countPrice(scope.row) }}</template>
            <template v-else-if="item.field === 'sourceTargetName'">{{ propData.data.sourceTargetName }}</template>
            <template v-else-if="item.field === 'child_2'">{{ scope.row.sparepart[item.prop] }}</template>
            <template v-else>{{ scope.row[item.prop] }}</template>
          </template>
        </el-table-column>
      </el-table>
      <p class="total">{{ $t('common.base.amountCount') }}：￥{{ total }}</p>
    </div>
    <div class="mar-b-20" v-else>
      <div class="mar-b-15 font-w-500">{{ $t('common.task.cardName[12]') }}</div>
      <el-table v-table-style :key="partDealKey" border @select="tableSelect" @select-all="selectAll" :data="propData.arr" ref="selectTable" stripe style="width: 100%" max-height="350">
        <el-table-column type="selection" width="50px"></el-table-column>
        <el-table-column width="120px" v-for="(item, index) in tableColumn" :key="index" :prop="item.prop" :label="item.lable" :min-width="item.width" :fixed="item.fixed" :align="item.align" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <template v-if="item.normalType === 'controler'">
              <el-input-number controls-position="right" style="width: 100%" :disabled="!scope.row.checked" :min="0" v-model="scope.row.handleNum" :precision="minVariation" :step="1" :max="scope.row.max"></el-input-number>
              <!-- <input type="number"  :max="scope.row.max" :min="0" :disabled="!scope.row.checked" v-model="scope.row.handleNum" oninput="value = value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" /> -->
            </template>
            <template v-else-if="item.field === 'price'">{{ countPrice(scope.row) }}</template>
            <template v-else-if="item.field === 'mulNumber'">{{ scope.row.solvedVariation }}/{{ scope.row.variation }}</template>
            <template v-else-if="item.field === 'child_2'">{{ scope.row.sparepart[item.prop] }}</template>
            <template v-else-if="item.field === 'sourceTargetName'">{{ scope.row.sourceName }}</template>
            <template v-else>{{ scope.row[item.prop] }}</template>
          </template>
        </el-table-column>
      </el-table>
      <p class="total">{{ $t('common.base.amountCount') }}：￥{{ total }}</p>
    </div>
    <!-- 备件清单 end-->
    <!-- {{approveState}} -->
    <div  v-if="approveState == 'success' || !approveId">
      <!-- <div v-if="inputonlyread===false && propData.data.approved">
        <div class="mar-b-15 font-w-500">办理意见</div>

        <el-input
          type="textarea"
          maxlength="500"
          resize="none"
          :autosize="{ minRows: 2, maxRows: 6 }"
          :placeholder="inputonlyread?'':'请输入办理意见[500个字以内]'"
          v-model="suggestion"
          :readonly="inputonlyread"
        ></el-input>
      </div> -->
      <div v-if="propData.data.state === 'suspending' || propData.data.state === 'dealing'"   :class="{ 'mar-b-15': approveId && approveData.attribute }">
        <div class="mar-b-15 font-w-500">{{ $t('common.form.preview.sparepart.colum21') }}</div>
        <el-input type="textarea" maxlength="500" resize="none" :autosize="{ minRows: 2, maxRows: 6 }" :placeholder="$t('part.tips18', { num: 500 })" v-model="suggestion"></el-input>
      </div>
    </div>
    <div v-if="approveId && approveData.attribute">
      <div class="font-w-500">{{ $t('sparepart.setting.setApprover.approverMsg')}}</div>
      <advanced-approval-process
        :approveData="approveData" 
        :approveId="approveId" 
        :approveNo="propData.data.approveNo"
        ref="advancedApprovalProcessRef"
        module="sparepart"
        @update="updateList"
        >
    </advanced-approval-process>
    </div>

    <!-- 办理日志 start -->
    <div class="mar-b-20" style="margin-top: 20px" v-if="logs.length">
      <div class="mar-b-15 font-w-500">{{ $t('part.text20') }}</div>
      <p class="partP" v-for="item in logs" :key="item.id">
        <template v-if="isOpenData">
          <span style="width: 180px">{{ $t('common.form.preview.stock.sparepartStockDisplayName.approveName') }}：<open-data type="userName" :openid="item.executorStaffId"></open-data></span>
        </template>
        <template v-else>
          <span style="width: 180px">{{ $t('common.form.preview.stock.sparepartStockDisplayName.approveName') }}：{{ item.executorName }}</span>
        </template>
        <span style="width: 230px">{{ $t('common.form.preview.stock.sparepartStockDisplayName.approveTime') }}：{{ item.createTime | fmt_datetime }}</span>
        <!-- <span style="width:230px;">出入库编号：
          <span style="color:#55b7b4;cursor:pointer;" @click="toWareRecord(item.approveNo)">{{item.approveNo}}</span>
        </span> -->
        <span style="width: calc(100% - 430px)" :title="item.remark">{{ $t('common.form.preview.sparepart.colum21') }}：{{ item.remark }}</span>
      </p>
    </div>
    <!-- 办理日志 end -->
  </div>
</template>
<script>
import { isOpenData, openAccurateTab } from '@src/util/platform';
import { mathMul, mathAccSub } from '@src/util/math';
import { forEach } from 'lodash';
import { updateBackTarget } from '@src/api/SparePart';
import { safeNewDate } from '@src/util/time';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';
import { getRootWindow } from '@src/util/dom';
import { t } from '@src/locales';
import AdvancedApprovalProcess from '@src/component/compomentV2/AdvancedApproval/compoment/AdvancedApprovalProcess.vue';
export default {
  name: 'part-deal-with-form',
  components: {
    [AdvancedApprovalProcess.name]: AdvancedApprovalProcess,
  },
  inject:['initData'],
  props: {
    propData: {
      type: Object,
    },
    partDealKey: {
      type: Number,
    },
    targetList: Array,
    approveData: {
      type: Object,
      default: () => {}
    },
    approveId: {
      type: String,
      default: '',
    },
    approveState: {
      type: String,
      default: '',
    },
  },
  watch: {
    partDealKey(newVal) {
      this.$nextTick(() => {
        if (this.$refs.selectTable) {
          this.selects = [];
          this.$refs.selectTable.toggleAllSelection();
        }
        this.formArr = this.buildFormArr();

        this.isRepertoryAdmin = this.targetList.find(item => item.id === this.propData.data.targetId);

        this.notOneself = this.propData.arr.find(item => item.propserName !== this.propData.data.sourceTargetName);
      });
    },
  },
  created(){
    this.formArr = this.buildFormArr()
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.selectTable) {
        this.selects = [];
        this.$refs.selectTable.toggleAllSelection();
      }

      this.isRepertoryAdmin = this.targetList.find(item => item.id === this.propData.data.targetId);

      this.notOneself = this.propData.arr.find(item => item.propserName !== this.propData.data.sourceTargetName);
    });
  },
  computed: {
    total() {
      let price = 0;
      this.propData.arr.forEach(item => {
        price += mathMul(item.variation, item.sparepart.salePrice);
      });
      return price.toFixed(2);
    },
    logs() {
      return this.propData.progress.filter(item => item.state !== 0);
    },
    // 是否开启商城灰度
    isOpenServiceMall() {
      const RootWindow = getRootWindow(window);
      return RootWindow?.grayAuth?.SERVICE_MALL ?? false;
    },
    minVariation() {
      let initData = this.initData;
      return !initData || !initData.precision
        ? 0
        : initData.precision == 1
        ? 1
        : 2;
    },
  },
  data() {
    let validateNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(t('part.tips53')));
      } else if (value < 0) {
        callback(new Error(t('part.tips54', { num: 0 })));
      } else if (!/^(([0-9][0-9]*)|(([0]\.\d{1,2}|[0-9][0-9]*\.\d{1,2})))$/.test(value)) {
        callback(new Error(t('part.tips55', { num: 2 })));
      } else {
        callback();
      }
    };
    let tableColumnReadonly = [
      {
        field: 'child_2',
        prop: 'serialNumber',
        lable: t('common.paas.model.sparePartField.sparePartNo'),
        width: '100',
      },
      {
        field: 'child_2',
        prop: 'name',
        lable: t('common.fields.partName.displayName'),
        width: '120',
      },
      {
        field: 'child_2',
        prop: 'type',
        lable: t('common.label.sparepartType'),
        width: '120',
      },
      {
        field: 'child_2',
        prop: 'standard',
        lable: t('common.part.specifications'),
        width: '120',
      },
      {
        field: 'child_2',
        prop: 'unit',
        lable: t('common.label.unit'),
        width: '60',
      },
      {
        field: 'variation',
        prop: 'variation',
        lable: t('common.fields.materielApplyCount.displayName'),
        width: '70',
      },
      {
        field: 'solvedVariation',
        prop: 'solvedVariation',
        lable: t('part.field1'),
        width: '100',
      },
      {
        field: 'sourceTargetName',
        prop: 'sourceTargetName',
        lable: t('part.field26'),
        width: '120',
      },
      {
        field: 'targetName',
        prop: 'targetName',
        lable: t('part.field8'),
        width: '120',
      },
      {
        field: 'price',
        prop: 'data1',
        lable: `${t('common.form.type.currency')}(¥)`,
        width: '100',
      },
    ];
    let tableColumn = [
      {
        normalType: 'controler',
        lable: t('part.field1'),
        width: '100',
        prop: 'solvedVariation',
        fixed: 'left',
      },
      {
        field: 'mulNumber',
        prop: 'mulNumber',
        lable: t('part.field2'),
        fixed: 'left',
        width: '130',
        align: 'center',
      },
      {
        field: 'child_2',
        prop: 'name',
        lable: t('common.fields.partName.displayName'),
        width: '120',
      },
      {
        field: 'child_2',
        prop: 'type',
        lable: t('common.label.sparepartType'),
        width: '120',
      },
      {
        field: 'child_2',
        prop: 'serialNumber',
        lable: t('common.label.serialNumber'),
        width: '100',
      },
      {
        field: 'child_2',
        prop: 'standard',
        lable: t('common.part.specifications'),
        width: '120',
      },
      {
        field: 'child_2',
        prop: 'unit',
        lable: t('common.label.unit'),
        width: '60',
      },
      {
        field: 'sourceTargetName',
        prop: 'sourceTargetName',
        lable: t('part.field26'),
        width: '120',
      },
      {
        field: 'targetName',
        prop: 'targetName',
        lable: t('part.field8'),
        width: '120',
      },
      {
        field: 'repertoryCount',
        prop: 'repertoryCount',
        lable: t('part.field6'),
        width: '90',
      },
      {
        field: 'price',
        prop: 'data1',
        lable: `${t('common.form.type.currency')}(¥)`,
        width: '100',
      },
    ];
    let inputonlyread = this.propData.data.state !== 'suspending';
    let selects = [];
    return {
      isOpenData,
      input: '测试数据',
      rules: {
        number: [{ validator: validateNumber, trigger: 'change' }],
      },
      suggestion: '',
      tableColumn,
      tableColumnReadonly,
      inputonlyread,
      selects,
      popovershow: false,
      targetId: '',
      formArr: [],
      pending: false,
      isRepertoryAdmin: null, // 是否是目标仓库的管理员
      notOneself: true, // 是否是本人发起
    };
  },
  methods: {
    /**刷新列表 */
    updateList() {
      this.$emit('updateList');
    },
    /** 打开审批弹窗 */
    openApproveDialog(type, approveListRelations, approveInfo) {
      if (approveInfo) {
        approveInfo.proposerName = approveInfo.proposername
        approveInfo.createTime = approveInfo.createtime
        approveInfo.approveRemark = approveInfo.approveremark
      }
      this.$refs.advancedApprovalProcessRef.openDialog(type, approveListRelations, approveInfo)
    },
    buildFormArr() {
      return [
        { lable: t('part.field5'), value: this.propData.data.prosperTime, key: 'key1' },
        { lable: t('common.form.preview.stock.sparepartStockDisplayName.approveNo'), value: this.propData.data.approveNo, key: 'key2' },
        { lable: t('part.field4'), value: this.propData.data.type, key: 'key3' },
        { lable: t('common.form.preview.stock.sparepartStockDisplayName.approveName'), value: this.isOpenData ? this.propData.data.prosperStaffId : this.propData.data.prosperName, key: 'key4' },
        { lable: t('part.field3'), value: this.isOpenData ? this.propData.data.targetStaffId : this.propData.data.targetName, key: 'key5' },
        { lable: t('part.text21'), value: this.getStateText(this.propData.data.state), state: this.propData.data.state, key: 'key6' },
      ];
    },
    // 查看关联订单号详情
    onSeeDetail(id, type) {
      if (type == 1) {
        this.openMallView(id);
      } else if (type == 2) {
        this.openTaskView(id);
      }
    },
    /**
     * @description 查看商城详情
     */
    openMallView(id) {
      let fromId = window.frameElement.getAttribute('id');
      // platform.openTab({
      //   id: "my_shop_order_detail",
      //   title: "订单详情",
      //   url: `/linkc/order/detail?id=${id}`,
      //   close: true,
      //   fromId,
      // });
      const type = this.isOpenServiceMall ? PageRoutesTypeEnum.PageOrderDetailV2 : PageRoutesTypeEnum.PageOrderDetail;
      openAccurateTab({
        type,
        key: id,
        params: `id=${id}`,
        fromId,
      });
    },

    /**
     * @description 查看工单详情
     */
    openTaskView(taskId) {
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `task_view_${taskId}`,
      //   title: '工单详情',
      //   close: true,
      //   url: `/task/view/${taskId}`,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: taskId,
        fromId,
      });
    },
    // 确认修改目标仓库
    submitEditTarget() {
      if (!this.targetId) {
        return this.$platform.alert(t('part.tips56'));
      }
      this.pending = true;
      const params = {
        approveNo: this.propData.data.approveNo,
        repertoryId: this.targetId,
      };
      updateBackTarget(params).then(res => {
        this.pending = false;
        if (res.code === 0) {
          this.popovershow = false;
          this.$emit('updateDetail', this.propData.data);
          this.$emit('updateList');
        } else {
          this.$platform.alert(res.message);
        }
      });
    },
    // 修改目标仓库 弹出
    editTargetRepertory() {
      // this.popovershow=true;
      const exist = this.targetList.find(item => item.id === this.propData.data.targetId);
      if (exist) {
        this.targetId = this.propData.data.targetId;
      } else {
        this.targetId = '';
      }
    },
    // 跳转到出入库记录
    toWareRecord(data) {
      // this.$platform.openTab({
      //   url:'/partV2/repertory/record?fromId='+data,
      //   title: '出入库记录',
      //   close: true,
      // })
      openAccurateTab({
        type: PageRoutesTypeEnum.PagePartRepertoryRecordList,
        params: `fromId=${data}`,
      });
    },
    // 单个选择
    tableSelect(selection, row) {
      this.selects = [...selection];
      const exist = selection.find(item => item.id === row.id);
      if (exist) {
        const decimals = Math.max(this.countDecimals(row.variation), this.countDecimals(row.solvedVariation));
        row.max = (row.variation - row.solvedVariation).toFixed(decimals);
        row.checked = true;

        row.handleNum = (this.propData.data.state == 'suspending' && this.approveId && row.tempNum)? row.tempNum : (row.variation - row.solvedVariation).toFixed(decimals);

      } else {
        row.checked = false;
        row.handleNum = '';
      }
    },
    // 全选
    selectAll(selection) {
      if (selection.length > 0) {
        const leftArr = selection.filter(item => !this.selects.find(sItem => sItem.id === item.id));
        leftArr.forEach(item => {
          const decimals = Math.max(this.countDecimals(item.variation), this.countDecimals(item.solvedVariation));
          item.checked = true;
          item.max = (item.variation - item.solvedVariation).toFixed(decimals);
          item.handleNum = (this.propData.data.state == 'suspending' && this.approveId && item.tempNum) ? item.tempNum : (item.variation - item.solvedVariation).toFixed(decimals);
        });
      } else {
        // if((this.propData.data.type==='调拨' || this.propData.data.type==='分配') && this.propData.data.state==='suspending'){
        //   this.propData.arr.forEach(item=>{
        //     item.checked=true;
        //     item.disabled=true;
        //     const decimals=Math.max(this.countDecimals(item.variation),this.countDecimals(item.solvedVariation));
        //     item.handleNum=(item.variation-item.solvedVariation).toFixed(decimals);
        //     this.$refs.selectTable.toggleRowSelection(item,true);
        //   });
        // }else{
        //   this.propData.arr.forEach(item=>{
        //     item.checked=false;
        //     item.handleNum='';
        //   });
        // }
        this.propData.arr.forEach(item => {
          item.checked = false;
          item.handleNum = '';
        });
      }
      this.selects = [...selection];
    },
    // 获取小数位数
    countDecimals(num) {
      if (Math.floor(num) === num) return 0;
      return num.toString().split('.')[1].length || 0;
    },
    getStateText(state) {
      switch (state) {
        case 'solved':
          return t('common.form.preview.stock.status.solved');
        case 'suspending':
          return t('common.form.preview.stock.status.suspending');
        case 'dealing':
          return t('common.form.preview.stock.status.dealing');
        case 'cancel':
          return t('common.task.type.offed');
        case 'rejected':
          return t('common.task.type.refused');
        case 'revoked':
          return t('common.form.preview.stock.status.revoked');
        default:
          return '';
      }
    },
    countPrice(obj) {
      return mathMul(obj.variation, obj.sparepart.salePrice);
    },
    getData() {
      return this.validator();
    },
    validator() {
      return new Promise((resolves, rejects) => {
        // let func_arr = [];

        // for (let index = 0; index < this.propData.arr.length; index++) {
        //   const func = new Promise((resolve, reject) => {
        //     this.$refs["ruleForm"][index].validate((valid, obj) => {
        //       let keys = Object.keys(this.rules);
        //       if (valid) resolve();
        //       keys.forEach(item => {
        //         if (obj.hasOwnProperty(item) === true) {
        //           reject(obj[item]);
        //           return false;
        //         }
        //       });
        //     });
        //   });
        //   func_arr.push(func);
        // }

        let type = (this.propData.data && this.propData.data.type) || '';
        let isApply = type === '申领';

        const noCheck = this.propData.arr.find(item => item.checked);
        if (!noCheck) {
          rejects(new Error(t('part.tips57')));
          return false;
        }
        const checks = this.propData.arr.filter(item => item.checked);
        checks.forEach(item => {
          // 只处理申领
          if (item.handleNum * 1 > item.repertoryCount && isApply) {
            rejects(new Error(`"${item.sparepart.name.length > 10 ? `${item.sparepart.name.slice(0, 9)}...` : item.sparepart.name}"${t('part.tips90')}`));
            return false;
          }
          if (item.handleNum * 1 > mathAccSub(item.variation, item.solvedVariation)) {
            rejects(new Error(`"${item.sparepart.name.length > 10 ? `${item.sparepart.name.slice(0, 9)}...` : item.sparepart.name}"${t('part.tisp4')}`));
            return false;
          }
        });
        let { suggestion, propData } = this;
        resolves({
          suggestion,
          propData,
        });

        // Promise.all(func_arr)
        //   .then(res => {
        //     this.propData.arr.forEach(element => {
        //       // 只处理申请情况
        //       if (element.number * 1 > element.repertoryCount && isApply) {
        //         rejects(
        //           new Error(
        //             `"${
        //               element.sparepart.name.length > 10
        //                 ? `${element.sparepart.name.slice(0, 9)}...`
        //                 : element.sparepart.name
        //             }"的库存数量不足`
        //           )
        //         );
        //         return false;
        //       }
        //       if (
        //         element.number * 1 >
        //         mathAccSub(element.variation, element.solvedVariation)
        //       ) {
        //         rejects(
        //           new Error(
        //             `"${
        //               element.sparepart.name.length > 10
        //                 ? `${element.sparepart.name.slice(0, 9)}...`
        //                 : element.sparepart.name
        //             }"的办理数量不得大于可办理数量`
        //           )
        //         );
        //         return false;
        //       }
        //     });
        //     let { suggestion, propData } = this;
        //     resolves({
        //       suggestion,
        //       propData
        //     });
        //   })
        //   .catch(obj => {
        //     rejects(obj[0]);
        //   });
      });
    },
    resetData() {
      this.suggestion = '';
    },
  },
};
</script>

<style lang="scss" scoped>
.popover-line {
  border-top: 1px solid $color-border-l4;
  position: relative;
  left: -12px;
  width: calc(100% + 24px);
}

.icon-bianji {
  color: $color-primary;
  cursor: pointer;
}
.total {
  text-align: right;
  margin-top: 10px;
}
.normal-box {
  padding: 10px;
  box-sizing: border-box;
}
.flex-x {
  display: flex;
  align-items: center;
}
.flex-1 {
  flex: 1;
}
.mar-r-15 {
  margin-right: 15px;
}
.mar-b-15 {
  margin-bottom: 15px;
}
.mar-b-20 {
  margin-bottom: 20px;
}
.font-w-500 {
  font-weight: 500;
}
.form-only-see {
  width: 33.3%;
  margin-bottom: 15px;
  .form-only-see-input {
    width: 180px;
  }

  .form-only-see-state {
    border-radius: 14px;
    padding: 3px 10px;
  }
  // 已办理
  .form-only-see-solved {
    color: #fff;
    background: rgba(38, 198, 218, 1);
  }

  // 待办理
  .form-only-see-suspending {
    color: #fff;
    background: rgba(255, 112, 67, 1);
  }

  // 办理中
  .form-only-see-dealing {
    color: #fff;
    background: rgba(41, 182, 246, 1);
  }

  // 已取消
  .form-only-see-cancel {
    color: #fff;
    background: rgba(189, 189, 189, 1);
  }
  // 已拒绝
  .form-only-see-rejected {
    color: #fff;
    background: rgba(255, 77, 79, 1);
  }
  // 已撤回
  .form-only-see-revoked {
    color: #fff;
    background: rgba(146, 165, 173, 1);
  }
}

.form-only-see-title {
  min-width: 56px;
  margin-right: 15px;
  font-weight: bold;
}
.only-see-box {
  flex-wrap: wrap;
}
.overHideCon-1 {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}
.al-start {
  align-items: flex-start;
}

.partP {
  span {
    display: inline-block;
    // overflow: hidden;
    // text-overflow:ellipsis;
    // white-space: nowrap;
  }
}
.color-primary {
  color: $color-primary;
  cursor: pointer;
}
</style>
